<template>
    <div id="useRatio" class="useRatio">
        <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
                <div
                        @click="printTest2"
                        class="box"
                        style="height: 90px; position: relative"
                >
                    <div class="left_icon el-icon-share" style="color: #f7c114"></div>
                    <div class="right">
                        <div class="right1">so总数</div>
                        <div class="right2">{{ this.soCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
                <div class="box" style="height: 90px; position: relative">
                    <div
                            class="left_icon el-icon-office-building"
                            style="color: #c97586"
                    ></div>
                    <div class="right">
                        <div class="right1">已发运</div>
                        <div class="right2">{{ this.shippedCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
                <div class="box" style="height: 90px; position: relative">
                    <div class="left_icon el-icon-printer" style="color: #65318e"></div>
                    <div class="right">
                        <div class="right1">待发运</div>
                        <div class="right2">{{ this.unShippedCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
                <div class="box" style="height: 90px; position: relative">
                    <div class="left_icon el-icon-s-data" style="color: #9ba88d"></div>
                    <div class="right">
                        <div class="right1">入库单</div>
                        <div class="right2">{{ this.acceptCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
                <div class="box" style="height: 90px; position: relative">
                    <div class="left_icon el-icon-goods" style="color: #007b43"></div>
                    <div class="right">
                        <div class="right1">质检</div>
                        <div class="right2">{{ this.qcCount }}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                <div class="box">
                    <div class="box3" style="position: relative">
                        <div
                                id="main"
                                style="width: 1200px; height: 650px; margin-top: 0px"
                        ></div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <div class="box">
                    <el-row>
                        <el-col :span="12">
                            <div class="box3">
                                <dv-decoration-9
                                        style="width: 120px; height: 120px"
                                >66%</dv-decoration-9
                                >
                                <div class="title">库存周转率</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="box3">
                                <dv-water-level-pond
                                        :config="config"
                                        style="width: 120px; height: 120px"
                                />
                                <div class="title">货位利用率</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="box">
                    <el-row>
                        <el-col :span="24">
                            <div class="box3">
                                <div class="title2">任务进行</div>
                                <el-row>
                                    <el-col :span="3">
                                        <div class="title3">上架</div>
                                    </el-col>
                                    <el-col :span="21"
                                    ><el-progress
                                            :stroke-width="15"
                                            :percentage="50"
                                    ></el-progress
                                    ></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="3"
                                    ><div class="title3">拣货</div>
                                    </el-col>
                                    <el-col :span="21">
                                        <el-progress
                                                :stroke-width="15"
                                                :percentage="90"
                                                color="#8B5CFF"
                                        ></el-progress>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="3"
                                    ><div class="title3">补货</div>
                                    </el-col>
                                    <el-col :span="21"
                                    ><el-progress
                                            :stroke-width="15"
                                            :percentage="100"
                                            status="success"
                                    ></el-progress
                                    ></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="3"
                                    ><div class="title3">装箱</div>
                                    </el-col>
                                    <el-col :span="21"
                                    ><el-progress
                                            :stroke-width="15"
                                            :percentage="100"
                                            status="warning"
                                    ></el-progress
                                    ></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="3"
                                    ><div class="title3">集货</div>
                                    </el-col>
                                    <el-col :span="21"
                                    ><el-progress
                                            :stroke-width="15"
                                            :percentage="50"
                                            status="exception"
                                    ></el-progress
                                    ></el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- <img src="../assets/images/test1.png" alt="test1.png" width="100%">-->
    </div>
</template>

<script>
    import print from "print-js";
    import { mapState } from "vuex";

    var echarts = require("echarts");

    export default {
        name: "UseRatio",
        data() {
            return {
                soCount: 0,
                shippedCount: 0,
                unShippedCount: 0,
                acceptCount: 0,
                qcCount: 0,
                searchObj: {
                    days: "7",
                },
                radio2: 0,
                config: {
                    data: [66, 45],
                    shape: "roundRect",
                },
                config5: {
                    value: 66,
                    textColor: "black",
                },
                option: {
                    color: [
                        "#0090FF",
                        "#36CE9E",
                        "#FFC005",
                        "#FF515A",
                        "#8B5CFF",
                        "#00CA69",
                    ],
                    title: {
                        left: '2%',
                        text: "操作统计",
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {
                        data: ["入库", "出库", "盘点", "调拨", "补货"],
                    },
                    grid: {
                        left: "2%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                        axisLabel: {
                            textStyle: {
                                fontSize: "16",
                            },
                        },
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                fontSize: "16",
                            },
                        },
                    },
                    series: [
                        {
                            smooth: true,
                            name: "入库",
                            type: "line",

                            data: [120, 132, 101, 134, 90, 230, 210],
                        },
                        {
                            smooth: true,
                            name: "出库",
                            type: "line",

                            data: [220, 182, 191, 234, 290, 330, 310],
                        },
                        {
                            smooth: true,
                            name: "盘点",
                            type: "line",

                            data: [150, 232, 201, 154, 190, 330, 410],
                        },
                        {
                            smooth: true,
                            name: "调拨",
                            type: "line",

                            data: [320, 332, 301, 334, 390, 330, 320],
                        },
                        {
                            smooth: true,
                            name: "补货",
                            type: "line",

                            data: [420, 532, 501, 534, 790, 830, 820],
                        },
                    ],
                },

            };
        },
        computed: {
            ...mapState(["productList"]),
        },
        methods: {
            fetchData(val) {
                let param = val ? val : this.searchObj.days;
                IOT.getServerData(
                    "/home/statistics/topStatistics",
                    "post",
                    { days: Number(param) },
                    (ret) => {
                        if (ret.code === 200) {
                            this.soCount = ret.data && ret.data.soCount;
                            this.shippedCount = ret.data && ret.data.shippedCount;
                            this.unShippedCount = ret.data && ret.data.unShippedCount;
                            this.acceptCount = ret.data && ret.data.acceptCount;
                            this.qcCount = ret.data && ret.data.qcCount;
                        } else {
                            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                        }
                    },
                    true
                );
            },
            changeDays(val) {
                this.fetchData(val);
            },
            printTest2() {
                var aaa = App.baseIp;

                printJS("deviceId", "html");
            },
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return "warning-row";
                } else if (rowIndex === 3) {
                    return "success-row";
                }
                return "";
            },
            initEcharts() {
                var myChart = echarts.init(document.getElementById("main"));

                // 指定图表的配置项和数据

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(this.option);
            },
        },
        mounted() {
            this.initEcharts();
        },
        created() {
            this.fetchData();
        },
    };
</script>

<style scoped lang="less">
    .useRatio {
        .div-title{
            width: 100vw;
            text-align: center;
            color: white;
            position: absolute;
            font-size: 30px;
            padding-top: 20px;
            z-index: 99;
        }
        .baseImg {
            background-size: 100% 100%;
            height: 100vh;
            position: fixed;
            width: 100vw;
        }
        .box {
            border-radius: 10px;
            margin: 20px 55px 25px 18px;
            padding: 10px 30px 10px 20px;

            //background-color: white;

            .left_icon {
                position: absolute;
                margin: 55px 20px;
            }

            .right {
                position: absolute;
                margin: 40px 20px;
                left: 40%;

                .right1 {
                    font-size: 17px;
                    margin: 20px 0px 10px 0px;
                }

                .right2 {
                    font-size: 22px;
                    font-weight: 600;
                    margin: 15px 0px 10px 0px;
                }
            }

            .left_icon:before {
                font-size: 2cm;
            }
        }

        .box2 {
            margin: 10px 15px 0px 0px;
            padding: 10px 0px 0px 15px;
            border-radius: 5px;
            height: 80px;
        }

        .box3 {
            margin: 10px 0px 0px 0px;
            padding: 22px 0px 0px 0px;
            border-radius: 15px;

            .title {
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                margin: 20px 0px 0px 20px;
                font-weight: 700;
            }

            .title2 {
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                margin: 40px 0px 20px 0px;
                font-weight: 700;
                font-size: 20px;
            }

            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }

            .title3 {
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                margin: 25px 0px 10px 0px;
                font-weight: 550;
                font-size: 15px;
            }
        }

        .el-progress {
            width: 100%;
            line-height: 4;
            // display: inline;
        }

        .el-tabs--card {
            border: none;
        }
    }
</style>
